<!DOCTYPE html>
<html>
<body>
  <h1>人员跟踪系统</h1>
  
  <div>
    <button onclick="calibrate()">标定相机</button>
    <button onclick="startTracking()">开始跟踪</button>
    <button onclick="stopTracking()">停止跟踪</button>
  </div>
  
  <div style="display: flex;">
    <div>
      <h2>实时画面</h2>
      <img id="video" src="http://localhost:8000/video-feed">
    </div>
    <div>
      <h2>平面图</h2>
      <img id="map" src="http://localhost:8000/map-feed">
    </div>
  </div>
  
  <script>
    async function calibrate() {
      const response = await fetch('/calibrate', { method: 'POST' });
      const result = await response.json();
      alert(result.status || result.error);
    }
    
    async function startTracking() {
      const response = await fetch('/start-tracking', { method: 'POST' });
      const result = await response.json();
      alert(result.status || result.error);
    }
    
    async function stopTracking() {
      const response = await fetch('/stop-tracking', { method: 'POST' });
      const result = await response.json();
      alert(result.status || result.error);
    }
  </script>
</body>
</html>